<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="close('onlyClose')"
    @submit="submitForm"
    :button-loading="isPersistenceLoading"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="90px"  @submit.native.prevent>
      <el-row :gutter="18">
        <el-col :span="12">
          <el-form-item label="名称" prop="timeSynName">
            <common-input
              v-model="form.timeSynName"
              placeholder="请输入"
              :maxlength="16"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编码" prop="timeSynCode">
            <common-input
              v-model="form.timeSynCode"
              placeholder="请输入"
              :maxlength="16"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="服务器地址" prop="address">
            <common-input v-model="form.address" :verify="false" placeholder="支持IPV4/IPV6/URL格式" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="端口号" prop="port">
            <common-input-number
              :max-length="5"
              v-model="form.port"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="状态" prop="enable">
            <el-radio-group v-model="form.enable">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <common-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 10 }"
              v-model="form.remark"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import {
  time_config_add,
  time_config_edit,
} from "@/api/management/configure/index.js";
import { portRule } from "@/utils/formRules";
import { validateIPAndURL } from "@/utils/formValidates"
export default {
  components: {},
  props: {},
  data() {
    return {
      isPersistenceLoading: false,
      dialogTitle: "编辑", // 标题
      dialogShow: false, // 是否显示
      form: {
        enable: 0,
        port: 80,
      },
      rules: {
        timeSynName: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        timeSynCode: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: '请输入服务器地址', trigger: 'blur' },
          { required: true, validator: validateIPAndURL, trigger: 'blur', message: "服务器地址错误，支持IPV4/IPV6/URL格式"}
        ],
        port: portRule,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 关闭
     */
    close(onlyClose) {
      this.$refs.form.resetFields();
      this.dialogShow = false;
      if(!onlyClose){
        this.$emit("refresh");
      }
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogTitle = data.timeSynId ? "编辑时间" : "新增时间";
      this.dialogShow = true;
      this.form = data.timeSynId ? data : this.$options.data().form;
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.timeSynId) {
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true;
              time_config_edit(this.form)
                .then((res) => {
                  if (res && res.code === 200) {
                    this.$GlobalSuccessMessage("编辑成功");
                    this.close();
                  } else {
                    this.$GlobalErrorConfirm("编辑失败", res.msg);
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                });
            }
          } else {
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true;
              time_config_add(this.form)
                .then((res) => {
                  if (res && res.code === 200) {
                    this.$GlobalSuccessMessage("新增成功");
                    this.close();
                  } else {
                    this.$GlobalErrorConfirm("新增失败", res.msg);
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                });
            }
          }
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
